<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
    <meta charset="UTF-8">
    <title>添加菜单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{../lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{../css/okadmin.css}">
    <link rel="stylesheet" th:href="@{../css/popwin.css}">
    <link rel="stylesheet" th:href="@{../css/floatdiv.css}">
    <link rel="stylesheet" th:href="@{../font/iconfont.css}">
</head>
<body>
<div class="ok-body popwin-body">
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
        <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>会员管理</cite></a>
            <a><cite>权限列表</cite></a>
            <a><cite>添加权限</cite></a>
        </span>
    </div>
    <!--form表单-->
    <form class="layui-form layui-form-pane ok-form" th:if="${menu} != null">
        <input type="hidden" name="id" th:value="${menu.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" th:value="${menu.name}" placeholder="名称" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">url</label>
            <div class="layui-input-block">
                <input type="text" name="url" th:value="${menu.url}" placeholder="请求路径" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择图标</label>
            <div class="layui-input-block">
                <input type="text" name="icon" th:value="${menu.icon}" id="iconSelect" placeholder="点击选择" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div id="iconbox">
        </div>
        <div class="layui-form-item" th:if="${pMenu} != null">
            <label class="layui-form-label">父级菜单</label>
            <div class="layui-input-block">
                <input type="hidden" id="pId" name="pId" th:value="${pMenu.id}">
                <input type="text" th:value="${pMenu.name}" id="pMenuName" readonly="readonly" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" th:unless="${pMenu} != null">
            <label class="layui-form-label">父级菜单</label>
            <div class="layui-input-block">
                <input type="hidden" id="pId" name="pId">
                <input type="text" id="pMenuName" readonly="readonly" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="popwin-footer">
            <button class="layui-btn" lay-submit lay-filter="addMenu">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>
<script th:src="@{../lib/layui/layui.js}"></script>
<script th:src="@{../js/floatdiv.js}"></script>
<script th:src="@{../js/frogdiv.js}"></script>
<script>
    var iconBox = FloatDiv.initFloat({
        dom : document.getElementById("iconbox"),
        url : "../icon/select",
        onClose : function(){
            // alert("sdf");
        }
    });

    layui.use(['element', 'form', 'jquery', 'laydate'], function () {
        var form = layui.form;
        var $ = layui.jquery;

        form.on('submit(addMenu)', function (data) {

            $.ajax({
                url : "update",
                method : "post",
                data : {
                    id : data.field.id,
                    name : data.field.name,
                    pId : data.field.pId == undefined ? "" : data.field.pId,
                    url : data.field.url,
                    icon : data.field.icon
                },
                dataType : "json",
                success : function (result) {
                    if(result.success){
                        layer.msg("修改成功！", {icon: 6, time: 1000, anim: 4}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    }else{
                        layer.msg(result.msg == null ? "修改失败" : result.msg, {icon: 6, time: 1000, anim: 4});
                    }
                },error : function () {
                    layer.msg("修改失败, 稍后重试.", {icon: 6, time: 1000, anim: 4});
                }
            });

            return false;
        });

        var frogDiv = FrogDiv({
            domId : "childPushContent",
            content : "<iframe src='selectTree' frameborder='no' style='width:100%;height: 100%;'></iframe>",
            referenceId : "pMenuName",
            borderWidth : '0px',
            intermediary : {
                intermediaryName : "menuAddParentAgency",
                data : function(data){
                    $("#pId").val(data.id);
                    $("#pMenuName").val(data.name);
                }
            }
        });

        $("#pMenuName").on("click", function () {
            frogDiv.open({
                width : this.offsetWidth + 'px',
                height : '250px'
            });
        })


        $("#iconSelect").on("click", function(){
            iconBox.load();
        });
    })
</script>
</body>
</html>
